<template>
  <div class="RegisterUser" v-loading="loading" :element-loading-text="text">
    <div class="logo">
      <img src="@/assets/登录页logo@2x.png" alt="" width="110px" height="48px">
    </div>
    <div class="box">
      <div class="fomr-box">
        <div class="title-box">
          <h3>后台管理系统</h3>
          <router-link to="/login">去登录</router-link>
        </div>
        <el-form label-position="top" :model="form" :rules="rules" ref="form">
          <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="form.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="repassword">
            <el-input type="password" v-model="form.repassword" placeholder="请再次输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { RegisterUser } from '@/api/user'
export default {
  name: 'RegisterUser',
  created () {
    this.loading = true
  },
  mounted () {
    this.loading = false
  },
  data () {
    return {
      loading: false,
      text: '页面加载中...',
      form: {
        username: '',
        password: '',
        repassword: ''
      },
      rules: {
        username: [
          // 非空校验
          { required: true, message: '用户名不能为空', trigger: 'change' },
          { pattern: /^[\w]{1,10}$/, message: '长度必须为 1 ~ 10位，可包含字母数字', trigger: 'change' }
        ],
        password: [
          // 非空校验
          { required: true, message: '密码不能为空', trigger: 'change' },
          // 正则校验
          { pattern: /^[\w]{6,15}$/, message: '长度必须为 6 ~ 15位，可包含字母数字', trigger: 'change' }

        ],
        repassword: [
          // 非空校验
          { required: true, message: '密码不能为空', trigger: 'change' },
          // 正则校验
          { pattern: /^[\w]{6,15}$/, message: '长度必须为 6 ~ 15位，可包含字母数字', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    async register () {
      // 获取 el-form 组件  调用 validate 方法  校验整个表单
      await this.$refs.form.validate()
      this.text = '等待服务器响应...'
      this.loading = true
      const res = await RegisterUser(this.form)
      if (res.data.message === '注册成功！') {
        this.loading = false
        // 注册成功提示
        this.$message({
          message: res.data.message,
          type: 'success'
        })
        // 路由跳转至登录界面
        this.$router.push('/login')
      } else {
        if (res.data.message === '用户名被占用，请更换其他用户名！') {
          this.loading = false
          // 注册失败提示
          this.$message.error(res.data.message)
        }
      }
      // console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
.RegisterUser {
  position: relative;
}

.logo {
  position: absolute;
  top: 30px;
  left: 50px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('@/assets/登录注册bg@2x.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  .fomr-box {
    padding: 0 60px;
    width: 540px;
    height: 560px;
    background: #FFFFFF;
    box-shadow: 0px 0px 28px 0px rgba(21, 43, 99, 0.08);
    border-radius: 8px;

    .title-box {
      margin-top: 48px;
      text-align: center;

      h3 {
        margin-bottom: 10px;
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #131523;
        letter-spacing: 0;
        text-align: center;
        line-height: 44px;
        font-weight: 400;
      }

      a {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #1E5EFF;
        letter-spacing: 0;
        text-align: center;
        line-height: 24px;
        font-weight: 400;
        text-decoration: none;
      }
    }

    .el-form {
      margin-top: 40px;

      .el-input__inner {
        width: 420px;
        height: 48px;
      }

      /deep/ .el-form-item__label {
        line-height: 0;
      }
    }
  }
}

.el-button {
  width: 100%;
}
</style>
